<!DOCTYPE html>
<html>
<head>
    <meta charset="UTF-8" />
    <title>我的电脑</title>
    <script src="https://cdn.staticfile.org/react/16.4.0/umd/react.development.js"></script>
    <script src="https://cdn.staticfile.org/react-dom/16.4.0/umd/react-dom.development.js"></script>
    <script src="https://cdn.staticfile.org/babel-standalone/6.26.0/babel.min.js"></script>
    <script src="https://cdn.staticfile.org/jquery/2.1.4/jquery.min.js"></script>

    <style>
        h1 {
            border-bottom: 1px solid #c0c0c0;
            margin-bottom: 10px;
            padding-bottom: 10px;
            white-space: nowrap;
        }
    </style>
</head>
<body>
<div id="example"></div>
<script type="text/babel">
    function  parseUrl(obj){
        return obj.toString().replace(new RegExp("\\\\", "gm"), "/");
    }

    class HandleDOM extends React.Component {
        constructor(props) {
            super(props);
            this.state = {src:""};
            this.closeSp = this.closeSp.bind(this);
        }

        closeSp(){
            this.setState({
                src:""
            });
        }

        componentDidMount(){
            this.setState({
                src:this.props.src
            });
        }

        render() {
            if(this.state.src){
                const htm1 = <video controls="controls" autoPlay="autoplay" width="22%"><source src={this.state.src}/></video>;
                const htm12 = <button onClick={this.closeSp.bind(this)}>关闭</button>;
                return (<span>{htm1}{htm12}</span>);
            }else{
                return "";
            }
        }
    }

    var json = {"time":false,"length":false,"name":false};


    class UserGist extends React.Component {
        constructor(props) {
            super(props);
            this.state = {list: [],path:"",mov:[],listItems:[]};
            this.handleClick = this.handleClick.bind(this);
            this.handleClick();
        }

        execute(src){
            this.state.mov.push(<HandleDOM src={src}/>);
            const items = this.state.mov.map((numbers,index) =>
                    <span key={index}>{numbers}</span>
             );
            this.setState(state =>({
                listItems:items,
            }));
        }


        handleClick(event) {
            var res ;
            var orderby = "";
            var desc = false;
            if(!event){
                res = this.props.path;
            }else{
                var tar = event.target;
                res = tar.attributes['url']?tar.attributes['url'].nodeValue:this.state.path;
                orderby = tar.attributes['orderby']?tar.attributes['orderby'].nodeValue:"";
                if(orderby){
                    json[orderby] = !json[orderby];
                    desc = json[orderby];
                }
            }
            var s = parseUrl(res);
            var url = this.props.source;
            this.serverRequest = $.post(url,{"path":s,"orderby":orderby,"desc":desc},function (result) {
                const arr = JSON.parse(result);
                const tr = arr.map((number,index) => {
                    var dz = encodeURI(parseUrl(number.url))
                    var flag = number.url.toString().indexOf(".")>- 1;
                    const desc =flag ?
                    <a href={dz} target="_black">{number.name}</a>:
                    <a href="javascript:void(0)" url={number.url}  onClick={this.handleClick.bind(this)}>{number.name}</a>;

                    var flag1 = number.url.toString().indexOf(".mp4")>- 1;
                    const bf =flag1 ? <button onClick={this.execute.bind(this, dz)}>播放</button>:"";
                    return (
                            <tr key={number.name}>
                    <td>{index+1}</td>
                    <td>{desc}</td>
                    <td>{number.length}</td>
                    <td>{number.time}</td>
                    <td>{bf}</td>
                    </tr>
                    );
                })
                this.setState({
                    list:tr,
                    path:res,
                });
            }.bind(this));
        }

        render() {
            //alert(JSON.stringify(this.state.listItems))
            var c = this.state.path==this.props.path || this.state.path=="" || this.state.path==null;
            var flag = this.state.path.toString().replace("\\","").indexOf("\\")>-1;
            let uuu;
            if(!c && flag){
                var inde = this.state.path.toString().lastIndexOf("\\");
                uuu = this.state.path.toString().substr(0,inde);
            }else{
                uuu = this.props.path;
            }

            const head =<h1>{!this.state.path || this.state.path==this.props.path ?this.props.path:this.state.path+"\\"} 的索引</h1>
            const c0 = <a href="javascript:void(0)" url={this.props.path}  onClick={this.handleClick.bind(this)}>根目录</a>;
            const c1 = <a href="javascript:void(0)" url={uuu}  onClick={this.handleClick.bind(this)}>上级目录</a>;
            const c2 = <tr><td width="50px"><strong>序号</strong></td>
                    <td width="250px"><strong orderby="name" onClick={this.handleClick.bind(this)}>名称</strong></td>
            <td width="250px"><strong orderby="length" onClick={this.handleClick.bind(this)}>大小</strong></td>
            <td width="250px"><strong  orderby="time"onClick={this.handleClick.bind(this)}>修改日期</strong></td>
            <td width="100px"><strong>操作</strong></td>
                    </tr>;

            return (<span>{this.state.listItems}{head}{c0}&nbsp;&nbsp;&nbsp;{c1}<br/><br/><table><tbody>{c2}{this.state.list}</tbody></table></span>);
        }
    }
    ReactDOM.render(
    <UserGist source="/getAllChildrenFileName" path="C:\"/>, document.getElementById('example'));
</script>

</body>
</html>